import 'package:cached_network_image/cached_network_image.dart';
import 'package:creatures_world/db/db_helper.dart';
import 'package:creatures_world/framework/custom/ext_widget/widget_util.dart';
import 'package:creatures_world/framework/ext_dart/map_ext.dart';
import 'package:creatures_world/pages/base/base_page.dart';
import 'package:creatures_world/pages/species_detail/species_detail_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_card_swiper/flutter_card_swiper.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../framework/utils/sized_box_util.dart';

class SpeciesDetailPage extends BasePage<SpeciesDetailController> {

  final CardSwiperController cardController = CardSwiperController();

  @override
  Widget build(BuildContext context) {

    controller.awake();
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Container(
        child: Column(
          children: [
            sb.h(MediaQuery.of(context).padding.top),
            SizedBox(
              height: 45.h,
              child: Row(
                children: [
                  sb.w(15.w),
                  Icon(Icons.arrow_back, color: Colors.white, size: 30.w),
                  sb.w(15.w),
                  Text(
                    "${controller.taxon.nn("preferred_common_name")}",
                    style: GoogleFonts.poppins(fontWeight: FontWeight.w500, fontSize: 20.sp, color: Colors.white),
                  ),
                  Spacer(),
                  Obx((){
                    return Icon(Icons.star,size: 30.w, color:  controller.isFavor.value?Colors.yellow:Colors.grey,).prop(onTap: (){
                      debugPrint("clicked star");
                      controller.favor();
                    });
                  }),

                  sb.w(15.w)
                ],
              ).prop(
                onTap: () {
                  Get.back();
                },
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.white,
                child: SingleChildScrollView(
                  physics: ClampingScrollPhysics(),
                  child: Container(
                    padding: EdgeInsets.only(bottom: 50.h),
                    color: Colors.white,
                    child: Column(
                      children: [
                        Obx(() {
                          if (controller.taxonData.value.isEmpty) {
                            return sb.h(250.h);
                          }
                          List<dynamic> taxon_photos = controller.taxonData["taxon_photos"];
                          return Container(
                            width: double.infinity,
                            height: 250.w,
                            child: Swiper(
                              itemCount: taxon_photos.length,
                              pagination: const SwiperPagination(),
                              itemBuilder: (ctx, index) {
                                Map<String, dynamic> img = taxon_photos[index];

                                return Container(
                                  width: double.infinity,
                                  height: double.infinity,
                                  color: Colors.white,
                                  child: Stack(
                                    children: [
                                      Container(
                                        width: double.infinity,
                                        height: double.infinity,
                                        child: CachedNetworkImage(imageUrl: img["photo"]["large_url"], fit: BoxFit.cover),
                                      ),

                                      Container(
                                        width: double.infinity,
                                        height: double.infinity,
                                        child: CachedNetworkImage(
                                          imageUrl: img["photo"]["large_url"],
                                          placeholder: (a, b) {
                                            return Center(child: CircularProgressIndicator());
                                          },
                                        ),
                                      ),
                                    ],
                                  ),
                                );
                              },
                            ),
                          );
                        }),

                        Column(
                          children: [
                            Container(
                              margin: EdgeInsets.all(15.w),
                              child: Row(
                                children: [
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        "${controller.taxon.nn("preferred_common_name")}",
                                        style: GoogleFonts.poppins(fontWeight: FontWeight.w500, fontSize: 20.sp, color: Color(0xff333333)),
                                      ),
                                      Text(
                                        "${controller.taxon.nn("name")}",
                                        maxLines: 2,
                                        style: GoogleFonts.poppins(fontWeight: FontWeight.w500, fontSize: 18.sp, color: Colors.grey),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                            Divider(),
                            Obx(() {

                              if( controller.taxonData.value.isEmpty ){
                                return sb.z();
                              }

                              List<dynamic> ancestors = controller.taxonData.value["ancestors"];

                              List<Widget> ancestorsWidgets =
                                  ancestors.map((e) {
                                    var data=e as Map<String,dynamic>;
                                    return Container(
                                      margin: EdgeInsets.only(top: 5.h, bottom: 5.h),
                                      child: Row(
                                        children: [
                                          CachedNetworkImage(imageUrl: data["default_photo"]["medium_url"], width: 40.w,height: 40.w,fit: BoxFit.cover,),
                                          sb.w(5.w),
                                          Column(
                                            crossAxisAlignment: CrossAxisAlignment.start,
                                            children: [
                                              Text("${data.nn2("name")}",maxLines: 2,),
                                              sb.h(5.h),
                                              Row(
                                                children: [
                                                  SizedBox(
                                                      width: 200.w,
                                                      child: Text("${data.nn2("preferred_common_name")}",style: GoogleFonts.poppins(
                                                        color: Colors.grey
                                                      ),),
                                                  ),
                                                ],
                                              ),
                                            ],
                                          ),

                                        ],
                                      ),
                                    );
                                  }).toList();
                              return Container(
                                margin: EdgeInsets.all(15.w),
                                child: Column(
                                  children: [
                                    Container( child: Html(data: '${controller.taxonData.nn("wikipedia_summary")}')),
                                    Divider(),
                                    Row(
                                      children: [
                                        Text("Taxonomy",style: GoogleFonts.poppins(
                                          fontSize: 16.sp,
                                          fontWeight: FontWeight.w500,
                                        ),),
                                      ],
                                    ),
                                    Divider(),
                                    Container( child: Column(children: ancestorsWidgets)),
                                  ],
                                ),
                              );
                            }),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
